<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>系统常态化运行评分系统</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
    <style>
        .expand.pear-btn:hover {
            color: currentColor;
            background: none;
        }

        .expand.pear-btn {
            border: 1px solid rgba(255, 255, 255, 0)
        }
    </style>
</head>

<body class="pear-container">

    <!-- 上传文件模态框 -->
    <div id="upload-modal">
        <div class="layui-form">
            <div class="layui-upload">
                <button type="button" class="layui-btn pear-btn-primary layui-btn-sm" id="ID-upload-demo-files">
                    <i class="layui-icon layui-icon-upload"></i>
                    选择多文件</button>
                <button type="button" class="layui-btn pear-btn-primary layui-btn-sm" id="ID-upload-demo-files-action">开始上传</button>
                <div class="layui-upload-list">
                    <table class="layui-table">
                        <colgroup>
                            <col style="min-width: 100px;">
                            <col width="150">
                            <col width="150">
                            <col width="150">
                        </colgroup>
                        <thead>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>上传状态</th>
                            <th>操作</th>
                        </thead>
                        <tbody id="ID-upload-demo-files-list"></tbody>
                    </table>
                </div>
                
            </div>
        </div>
    </div>

    <script src="../../component/layui/layui.js"></script>
    <script src="../../component/pear/pear.js"></script>
    <script src="../../scripts/utils/request.js"></script>
    <script src="../../scripts/utils/auth.js"></script>
    <script>
        var $, table, form, drawer, popup, notice, upload
        layui.use(['table', 'form', 'jquery', 'drawer', 'popup', 'notice', 'upload'], function () {
            table = layui.table;
            form = layui.form;
            $ = layui.jquery;
            drawer = layui.drawer;
            popup = layui.popup;
            notice = layui.notice;
            upload = layui.upload;
            initUpload()
            // 初始化上传组件
            function initUpload() {
                var uploadListIns = upload.render({

                    elem: '#ID-upload-demo-files',
                    url:  baseURL+'/api/file/uploadMineInfo?dicType='+parent.selectPath, // 替换为你的上传接口
                    accept: 'file',
                    multiple: true,
                    field:"files",
                    dataType:'json',
                    unified:false,
                    headers:{token:localStorage.getItem("token")},
                    auto: false,
                    bindAction: '#ID-upload-demo-files-action',
                    choose: function (obj) {
                        var that = this;
                        var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列

                        // 读取本地文件
                        obj.preview(function (index, file) {
                            var tr = $([
                                '<tr id="upload-' + index + '">',
                                '<td>' + file.name + '</td>',
                                '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>',
                                '<td>等待上传</td>',
                                '<td>',
                                '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
                                '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
                                '</td>',
                                '</tr>'
                            ].join(''));

                            // 单个重传
                            tr.find('.demo-reload').on('click', function () {
                                obj.upload(index, file);
                            });

                            // 删除
                            tr.find('.demo-delete').on('click', function () {
                                delete files[index]; // 删除对应的文件
                                tr.remove(); // 删除表格行
                                // 清空 input file 值，以免删除后出现同名文件不可选
                                uploadListIns.config.elem.next()[0].value = '';
                            });
                            $("#ID-upload-demo-files-list").append(tr)
                        });
                    },
                    done: function (res, index, upload) { // 成功的回调

                        var tr = $('#ID-upload-demo-files-list').find('tr#upload-'+ index)
                        console.log(tr);
                        var tds = $(tr).children();
                        $(tds).eq(2).html('上传成功'); // 清空操作
                        $(tds).eq(3).html('');
                       
                        delete this.files[index]; 
                    },
                    error: function (index, upload) { // 错误回调
                        var tr = $('#ID-upload-demo-files-list').find('tr#upload-'+ index)
                        var tds = tr.children();
                        // 显示重传
                        tds.eq(3).find('.demo-reload').removeClass('layui-hide');
                    },
                });
            }
        })
    </script>
</body>

</html>